<template>
    <div>
        <el-form-item label="name属性：" prop="name">
            <el-input v-model="modalFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="控件名称：">
            <el-input v-model="modalFormData.label" placeholder="请输入控件名称" ></el-input>
        </el-form-item>
        <el-form-item label="提示信息：">
            <el-input v-model="modalFormData.placeholder" placeholder="请输入提示信息"></el-input>
        </el-form-item>
        <el-form-item label="校验错误：">
            <el-input v-model="modalFormData.ruleError" placeholder="请输入校验错误提示"></el-input>
        </el-form-item>
        <el-form-item label="宽度：">
            <el-input-number v-model="modalFormData.width"></el-input-number>&nbsp;&nbsp;px
        </el-form-item>
        <el-form-item label="数据类型" v-if="modalFormData.hasOwnProperty('selectDataType')">
            <el-select v-model="modalFormData.selectDataType">
                <el-option :value="0" label="手动添加"></el-option>
                <el-option :value="1" label="数据字典"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="数据字典"  v-if="modalFormData.selectDataType">
        <el-select v-model="modalFormData.selectDataId" @change="getDataListById">
            <el-option
                v-for="item in selectList"
                :key="item.id"
                :value="item.id"
                :label="item.label"
            ></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="手动添加：" v-if="!modalFormData.selectDataType">
        <el-row :gutter="5">
            <el-col :span="10">
            <span>键名</span>
            </el-col>
            <el-col :span="10">
            <span>键值</span>
            </el-col>
            <el-col :span="2" style="text-algin:right;">
            <i @click="addDataList" class="el-icon-circle-plus-outline"></i>
            </el-col>
        </el-row>
        <el-row
            :gutter="10"
            v-for="(item,index) in modalFormData.dataList"
            :key="index"
            style="margin-top:5px;"
        >
            <el-col :span="10">
            <el-input v-model="item.label"></el-input>
            </el-col>
            <el-col :span="10">
            <el-input v-model="item.value"></el-input>
            </el-col>
            <el-col :span="2" style="text-algin:right;">
            <i @click="deleteDataList(index)" class="el-icon-remove-outline"></i>
            </el-col>
        </el-row>
        </el-form-item>
        <el-form-item label="是否必填：">
            <el-checkbox v-model="modalFormData.require">必填</el-checkbox>
        </el-form-item>
    </div>
</template>
<script>
export default {
    name:'SelectConfig',
    props:{
        modalFormData:{
            type:Object,
            default:()=>{
                return {}
            }
        }
    },
    data(){
        return {
            selectList:[]
        }
    },
    mounted(){
        this.$axios.post('/data/getData').then(res=>{
            this.selectList = res.data.data
        })
    },
    methods:{
        getDataListById(id){ //根据选择的数据id放入数据
            this.$axios.post('/data/getDataById',{id}).then(res=>{
                console.log(res,'res')
                this.modalFormData.dataList = res.data.data
            })
        },
        addDataList() {
            this.modalFormData.dataList.push({ label: null, value: null });
        },
    }
}
</script>